import { PropsWithChildren, useMemo, useState } from "react";
import { SvgIcon } from "../../components/SvgIcon";
import { RelationLawItem } from "./RelationLawItem";

interface ICaseResultItemProps {
  className?: string;
  info?: any;
}
export function CaseResultItem(props: PropsWithChildren<ICaseResultItemProps>) {
  const { info } = props;
  const [type, setType] = useState("1");

  const [collapse, setCollapse] = useState(true);

  const showStr1 = useMemo(() => {
    if (collapse && info?.opinion_text) {
      return info?.opinion_text?.slice(0, 200) + "...";
    }
    return info?.opinion_text || "无数据";
  }, [info?.opinion_text, collapse]);

  return (
    <div
      className="flex flex-col pb-[24px]"
      style={{ borderBottom: "1px solid #e6e8eb" }}
    >
      <div className="flex flex-row items-center">
        <div className="flex-1 min-w-0 overflow-hidden text-ellipsis whitespace-nowrap">
          <a
            href={"/caseDetail/" + info?.uuid}
            className="text-[#2C79F1] text-[18px] outline-none"
            target="_blank"
            style={{ textDecoration: "none" }}
          >
            {info?.case_name}
          </a>
        </div>
        <div className="flex flex-row items-center gap-[8px]">
          <SvgIcon name="icon-bookmark--outline" />
          <span className="text-[#8793ab] text-[14px]">其他</span>
        </div>
      </div>

      <div className="flex flex-row items-center text-[#8793ab] text-[12px] gap-[8px] py-[12px]">
        <span>{info?.case_number}</span>
        <span>|</span>
        <span>{info?.court}</span>
        <span>|</span>
        <span>{info?.publish_date}</span>
        <span>|</span>
        <span>{info?.case_status}</span>
      </div>

      <div className="bg-[#fafafc] mb-[24px] rounded-[4px] flex flex-col">
        <div className="flex flex-row items-center gap-[16px] text-[#3f3f3f] text-[14px] px-[16px] pt-[16px] pb-[8xp] mb-[12px]">
          <span
            className={["cursor-pointer", type === "1" && "text-[#2C79F1]"]
              .filter(Boolean)
              .join(" ")}
            onClick={() => setType("1")}
          >
            本院认为
          </span>
          <span>|</span>
          <span
            className={["cursor-pointer", type === "2" && "text-[#2C79F1]"]
              .filter(Boolean)
              .join(" ")}
            onClick={() => setType("2")}
          >
            裁判结果
          </span>
          <span>|</span>
          <span
            className={["cursor-pointer", type === "3" && "text-[#2C79F1]"]
              .filter(Boolean)
              .join(" ")}
            onClick={() => setType("3")}
          >
            相关法条
          </span>
        </div>

        {type === "1" && (
          <>
            <div className="max-h-[240px] overflow-auto text-[#666e79] font-[14px] pb-[14px] px-[16px]">
              {showStr1}
            </div>
            {!info?.opinion_text ? null : !collapse ? (
              <div
                className="text-[#2C79F1] cursor-pointer px-[16px]"
                onClick={() => setCollapse(true)}
              >
                [收起]
              </div>
            ) : (
              <div
                className="text-[#2C79F1] cursor-pointer px-[16px]"
                onClick={() => setCollapse(false)}
              >
                [展开]
              </div>
            )}
          </>
        )}

        {type === "2" && (
          <>
            <div className="max-h-[240px] overflow-auto text-[#666e79] font-[14px] pb-[14px] px-[16px]">
              {info?.verdict_text || "无数据"}
            </div>
          </>
        )}

        {type === "3" && (
          <div className="max-h-[240px] overflow-auto text-[#666e79] font-[14px] pb-[14px] px-[16px]">
            {info?.legal_basis}
          </div>
        )}
      </div>

      <div className="flex flex-row items-center gap-[8px]">
        <img src="/images/link.svg" />
        <span>无关联案件</span>
      </div>
    </div>
  );
}
